<script setup>
import { ref, onMounted, onUnmounted } from 'vue';

// 组合式函数示例 - 计数器逻辑复用
function useCounter(initialValue = 0) {
  const count = ref(initialValue);
  const increment = () => count.value++;
  const decrement = () => count.value--;
  const reset = () => count.value = initialValue;
  
  return { count, increment, decrement, reset };
}

// 组合式函数示例 - 定时器逻辑复用
function useTimer() {
  const seconds = ref(0);
  let timer = null;
  
  const start = () => {
    if (!timer) {
      timer = setInterval(() => {
        seconds.value++;
      }, 1000);
    }
  };
  
  const stop = () => {
    if (timer) {
      clearInterval(timer);
      timer = null;
    }
  };
  
  const reset = () => {
    seconds.value = 0;
    stop();
  };
  
  // 自动清理定时器
  onUnmounted(() => {
    stop();
  });
  
  return { seconds, start, stop, reset };
}

// 组合式函数示例 - 本地存储逻辑复用
function useLocalStorage(key, initialValue = '') {
  const value = ref(localStorage.getItem(key) || initialValue);
  
  const save = (newValue) => {
    value.value = newValue;
    localStorage.setItem(key, newValue);
  };
  
  const remove = () => {
    value.value = initialValue;
    localStorage.removeItem(key);
  };
  
  return { value, save, remove };
}

// 使用组合式函数
const { count, increment, decrement, reset: resetCounter } = useCounter(0);
const { seconds, start, stop, reset: resetTimer } = useTimer();
const { value: savedMessage, save: saveMessage, remove: removeMessage } = useLocalStorage('demo-message', '这是存储在localStorage的消息');

// 组件挂载时自动开始计时器
onMounted(() => {
  console.log('CompositionApiDemo 组件已挂载');
});

// 消息保存处理
const handleSaveMessage = () => {
  saveMessage(messageInput.value);
};

// 输入框绑定
const messageInput = ref(savedMessage.value);
</script>

<template>
  <div class="composition-api-demo">
    <h2 class="demo-title">🧩 Vue 3 组合式 API 演示</h2>
    
    <div class="demo-grid">
      <!-- 计数器示例 -->
      <div class="demo-card">
        <h3 class="card-title">useCounter - 计数器逻辑复用</h3>
        <div class="demo-content">
          <p class="counter-display">当前计数: <span class="count-value">{{ count }}</span></p>
          <div class="button-group">
            <button class="action-btn" @click="decrement">-</button>
            <button class="action-btn" @click="increment">+</button>
            <button class="action-btn secondary" @click="resetCounter">重置</button>
          </div>
        </div>
      </div>

      <!-- 定时器示例 -->
      <div class="demo-card">
        <h3 class="card-title">useTimer - 定时器逻辑复用</h3>
        <div class="demo-content">
          <p class="timer-display">已运行: <span class="seconds-value">{{ seconds }}</span> 秒</p>
          <div class="button-group">
            <button class="action-btn" @click="start">开始</button>
            <button class="action-btn warning" @click="stop">停止</button>
            <button class="action-btn secondary" @click="resetTimer">重置</button>
          </div>
        </div>
      </div>

      <!-- 本地存储示例 -->
      <div class="demo-card">
        <h3 class="card-title">useLocalStorage - 本地存储逻辑复用</h3>
        <div class="demo-content">
          <input 
            type="text" 
            class="text-input"
            v-model="messageInput"
            placeholder="输入要保存的消息"
          />
          <div class="button-group">
            <button class="action-btn" @click="handleSaveMessage">保存到本地</button>
            <button class="action-btn danger" @click="removeMessage">清除</button>
          </div>
          <p class="saved-message" v-if="savedMessage">
            已保存: {{ savedMessage }}
          </p>
        </div>
      </div>
    </div>

    <div class="explanation">
      <h3>组合式 API 的优势</h3>
      <ul>
        <li>✅ <strong>更好的逻辑复用</strong>: 通过组合式函数可以轻松复用状态逻辑</li>
        <li>✅ <strong>更好的类型推导</strong>: 对 TypeScript 支持更友好</li>
        <li>✅ <strong>更好的代码组织</strong>: 相关逻辑可以组织在一起</li>
        <li>✅ <strong>更好的代码压缩</strong>: 函数名可以被压缩，减小包体积</li>
      </ul>
    </div>
  </div>
</template>

<style scoped>
.composition-api-demo {
  animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.demo-title {
  font-size: 2rem;
  margin-bottom: 2rem;
  color: #333;
  text-align: center;
}

.demo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-bottom: 2rem;
}

.demo-card {
  background: #f8f9fa;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}

.card-title {
  font-size: 1.2rem;
  margin-bottom: 1rem;
  color: #667eea;
  font-weight: 600;
}

.demo-content {
  line-height: 1.8;
}

.counter-display,
.timer-display {
  font-size: 1.1rem;
  margin-bottom: 1rem;
  text-align: center;
}

.count-value,
.seconds-value {
  font-size: 2rem;
  font-weight: bold;
  color: #667eea;
  margin: 0 0.5rem;
}

.button-group {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
}

.action-btn {
  padding: 0.6rem 1.2rem;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.3s ease;
}

.action-btn:not(.secondary):not(.warning):not(.danger) {
  background: #667eea;
  color: white;
}

.action-btn:not(.secondary):not(.warning):not(.danger):hover {
  background: #764ba2;
}

.action-btn.secondary {
  background: #6c757d;
  color: white;
}

.action-btn.secondary:hover {
  background: #5a6268;
}

.action-btn.warning {
  background: #ffc107;
  color: #212529;
}

.action-btn.warning:hover {
  background: #e0a800;
}

.action-btn.danger {
  background: #dc3545;
  color: white;
}

.action-btn.danger:hover {
  background: #c82333;
}

.text-input {
  width: 100%;
  padding: 0.8rem;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 1rem;
  margin-bottom: 1rem;
}

.text-input:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.saved-message {
  margin-top: 1rem;
  padding: 0.8rem;
  background: #d4edda;
  border: 1px solid #c3e6cb;
  border-radius: 6px;
  color: #155724;
  font-size: 0.9rem;
}

.explanation {
  background: #e3f2fd;
  border-radius: 12px;
  padding: 2rem;
  margin-top: 2rem;
}

.explanation h3 {
  color: #1565c0;
  margin-bottom: 1rem;
}

.explanation ul {
  list-style: none;
  padding: 0;
}

.explanation li {
  padding: 0.5rem 0;
  border-bottom: 1px solid #bbdefb;
}

.explanation li:last-child {
  border-bottom: none;
}

@media (max-width: 768px) {
  .demo-grid {
    grid-template-columns: 1fr;
  }
  
  .demo-title {
    font-size: 1.6rem;
  }
  
  .button-group {
    flex-direction: column;
  }
}
</style>